<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>受光源影响的物体</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js"
            }
        }
    </script>
    <script type="module">
        //  
        import * as THREE from 'three';

        /**      一个3D 物体的形成需要
          *  1. 场景（Scene）承载物体的环境 const scene = new THREE.Scene()
          *  2. 相机（Camera）
          *  3. 渲染器（Renderer）
          * */


        /**
         *       场景中的物体（几何体）
         *  1. 长方体 - BoxGeometry
         *  2. 圆柱体 - CylinderGeometyr
         *  3. 球体 - SphereGeometry
         *  4. 圆锥 - ConeGeometry
         *  5. 矩形平面 - PlaneGeometry
         *  6. 原平面 - CircleGeometry
         *   https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry
        */

        /**
         *       几何体的外观（材质）
         *  1. 网格 - MeshBasicMaterial
         *  2. 网格漫反射 - MeshLambertMaterial （受光照影响）
         *  3. 网格高光 - MeshPhongMaterial  （受光照影响）
         *  4. 物理材质 - MeshStandardMaterial （受光照影响）
         *               MeshPhysicalMaterial  （受光照影响）
         *  5. 点基础材质 - PointsMaterial
         *  6. 线基础材质 - LineBasicMaterial
         *  7. 精灵材质 - SpriteMaterial
         *   https://threejs.org/docs/index.html?q=Material#api/en/materials/MeshBasicMaterial
        */

        // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
        const width = 800; //宽度
        const height = 500; //高度

        const scene = new THREE.Scene() // 3D环境

        const axesHelper = new THREE.AxesHelper(150); // 辅助坐标轴

        scene.add(axesHelper)

        const geometry = new THREE.BoxGeometry(100, 100, 100) //几何体

        const material = new THREE.MeshLambertMaterial({ // 材质
            color: 0x00ffff, //设置材质颜色
            transparent: true,//开启透明
            opacity: 0.5,//设置透明度
        })

        const mesh = new THREE.Mesh(geometry, material) // 物体

        mesh.position.set(0, 0, 0)

        scene.add(mesh)

        const pointLight = new THREE.PointLight(0xffffff, 1.0) // 创建一个光源 ！！！

        pointLight.position.set(100, 100, 0); // 设置光源点的位置

        scene.add(pointLight); // 添加到三维场景中

        const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000)  // 相机

        camera.position.set(200, 300, 500)

        camera.lookAt(0, 0, 0)

        const renderer = new THREE.WebGLRenderer()

        renderer.setSize(width, height);

        renderer.render(scene, camera);

        // 12. 将渲染物体添加到 指代功能的元素中
        document.body.appendChild(renderer.domElement);

        /** 思路总结
        */
    </script>
</body>

</html>